<template>
    <div>
        <div class="head_box">
                <img src="../../assets/logo.png" class="logo"/>

                <div class="search_box" @click="$router.push({path:'/strategy'})">
                    <span>搜索目的地/攻略/游记</span>
                    <van-icon name="search" />
                </div>

                <div class="login_div">
                    <router-link to="/user" v-if="user"><div class="user_icon" style="width:60rem;height:60rem;border-radius:60rem;overflow:hidden"><img style="width:60rem;height:60rem;" src="../../assets/user_icon.png"/></div></router-link>
                    <router-link v-else to="/login">登录</router-link>
                </div>
        </div>

        <div class="adver_box">

            <van-swipe class="my-swipe" :indicator-color="'#FFA630'" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(v,k) in adver" :key="k">
                    <img :src="v" :alt="v">
                </van-swipe-item>
            </van-swipe>

        </div>

        <div class="nav_box">

            <div class="nav_info" @click="$router.push({path:'/strategy'})">
                <div class="bg_div"></div>
                <span style="color:#FF9D00">找攻略</span>
            </div>

            <div class="nav_info" @click="$router.push({path:'/hotel'})">
                <div class="bg_div bg2"></div>
                <span style="color:#32A2F1">酒店</span>
            </div>

            <div class="nav_info" @click="$router.push({path:'/scenic_search'})">
                <div class="bg_div bg3"></div>
                <span style="color:#FD4E4E">去旅行</span>
            </div>

            <router-link to="/ticket" class="nav_info">
                
                    <div class="bg_div bg4"></div>
                    <span style="color:#D174F0">车票</span>
                
            </router-link>


        </div>

        <div class="strategy_box">
            <h1>最新攻略</h1>

            <div class="strategy_item" v-for="(v,k) in list" :key="k" @click="onDetails(v.s_id)">
                <div class="name">{{v.s_name}}</div>

                <div class="strategy_info">
                    <div class="info_left">
                        <img :src="v.s_icon"/>
                    </div>

                    <div class="info_right">
                        <div class="text">
                          {{v.s_title}}
                        </div>

                        <div class="user_div">

                            <div class="user_name">{{v.s_userName}}</div>

                            <div class="user_icon"><img v-if="v.s_userIcon" :src="v.s_userIcon"/><img v-else src="../../assets/user_icon.png"/></div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="pages">
              <van-pagination
                v-model="page"
                :total-items="count"
                :show-page-size="4"
                :items-per-page="length"
                force-ellipses
              />
            </div>
        </div>


    </div>
</template>

<script>
export default {
    data(){
        return {
            adver:[
                'https://n1-q.mafengwo.net/s16/M00/31/8E/CoUBUl60LWaAHRBEAB-pE4ORR84352.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90',
                'https://n1-q.mafengwo.net/s16/M00/CD/6C/CoUBUl6y3OGAf5oRABxFudg-L5g262.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90',
                'https://p1-q.mafengwo.net/s16/M00/57/1C/CoUBUl6xi9-AZQeoACqcYd8aGDM865.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90'
            ],
            list:null,
            page:1,
            count:0,
            length:0,
            user: null
        }
    },methods:{
      onDetails:function(id){
        this.$router.push({path:'/details',query:{id:id}});
      },
      onLoad:function(page=1){
        var that=this;

        var toast_load=this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/strategy/show',this.$qs.stringify({page:page})).then(
          (res)=>{
            if(res.data.code==1){
              that.list=res.data.data.list;

              that.count=res.data.data.count;

              that.page=res.data.data.page;

              that.length=res.data.data.length;

              toast_load.clear();
            }else{
              that.list=null;

              toast_load.clear();
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙');
          }
        )
      },
      getUser(){

          let that =this 

          this.$axios.post('/login/check_login').then( (res) => {

              if(res.data.code==1){
                  that.user = res.data.data.user
              }

          } ).catch( (err) => {

          } )
      }
    },
    created(){
      this.onLoad()

      this.getUser()
    }
}
</script>

<style scoped>
div.pages{
  margin:20rem 0;
}
div.head_box{
    width: 750rem;
    height: 100rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
div.head_box .logo{
    width:162rem;
    height: 42rem;
}
div.search_box{
    width: 420rem;
    height: 50rem;
    background-color: #F3F3F3;
    border-radius: 25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:10rem;
    color:#757575;
}
div.search_box span{
    margin-left: 20rem;
}
div.search_box i{
    margin-right: 20rem;
    font-size: 40rem;
    font-weight: bold;
}
div.head_box div.login_div a{
    color:#ffa800;
    font-size: 28rem;
}
div.adver_box,div.adver_box img{
    width:750rem;
    height: 400rem;
}
div.nav_box{
    width:750rem;
    height: 180rem;
    display: flex;
}
div.nav_box .nav_info{
    width:187.5rem;
    height: 180rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28rem;
}
div.nav_box .nav_info span{
    margin-top: 10rem;
}
div.nav_box .nav_info div.bg_div{
    width:100rem;
    height: 100rem;
    background: url(../../assets/i_nav6.png) no-repeat;
    background-size: 405rem;
}
div.nav_box .nav_info div.bg2{
    background-position: -100rem  0rem;
}

div.nav_box .nav_info div.bg3{
    background-position: -200rem  0rem;
}
div.nav_box .nav_info div.bg4{
    background-position: -300rem  -100rem;
}
div.strategy_box{
    width:750rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.strategy_box h1{
    width: 710rem;
    font-size:38rem;
    color:#666;
    margin:10rem 0;
    border-left:4rem solid #FED24D;
    text-indent: 15rem;
}
div.strategy_box div.strategy_item{
    width:710rem;
    margin:15rem 0;
}
div.strategy_box div.strategy_item div.name{
    font-size: 36rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin:10rem 0;
}
div.strategy_box div.strategy_item div.strategy_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.strategy_box div.strategy_item div.strategy_info div.info_left,div.strategy_box div.strategy_item div.strategy_info div.info_left img{
    width: 240rem;
    height: 180rem;
}
div.strategy_box div.strategy_item div.strategy_info div.info_right{
    width:440rem;
    color:#999;
    display: flex;
    flex-direction: column;
}
div.strategy_box div.strategy_item div.strategy_info div.info_right div.text{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex-wrap: wrap;
    font-size: 26rem;
}
div.strategy_box div.strategy_item div.strategy_info div.info_right div.user_div{
    display: flex;
    align-items: center;
    margin-top: 15rem;
    justify-content: flex-end;
}
div.strategy_box div.strategy_item div.strategy_info div.info_right div.user_div div.user_icon{
    width:40rem;
    height: 40rem;
    border-radius: 40rem;
    overflow: hidden;
    margin-left: 10rem;
}
div.strategy_box div.strategy_item div.strategy_info div.info_right div.user_div div.user_icon img{
    width:40rem;
    height: 40rem;
}
</style>
